<template>
  <div>
    <div>分配权限功能</div>
    <!-- show-checkbox	节点是否可被选择
    default-expand-all	是否默认展开所有节点
    check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
     -->
    <el-tree
      default-expand-all
      :data="permissionList"
      :props="{ label: 'name' }"
      show-checkbox
      check-strictly
      ref="theTree"
      node-key="id"
    />
    <el-row class="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="cancelButton">取 消</el-button>
        <el-button size="small" type="primary" @click="setRolesBtn"
          >确 定</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AssignPermission',
  props: {
    permissionList: {
      type: Array,
      default: _ => []
    },
    permIds: {
      type: Array,
      default: () => []
    }
    // roleId: {
    //   type: [Number, String],
    //   required: true
    // }
  },
  data () {
    return {}
  },
  created () {
    // console.log(this.roleId)
  },
  watch: {
    permIds () {
      // 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
      this.$refs.theTree.setCheckedKeys(this.permIds)
    }
  },
  methods: {
    // 取消按钮
    cancelButton () {
      this.$emit('input', false)
    },

    // 设置权限按钮
    setRolesBtn () {
      // getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
      this.$emit('addPerEV', this.$refs.theTree.getCheckedKeys())
      this.$emit('input', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 30px;
}
</style>
